<template>
    <div class="shop-list-item" :class="containerClass" @click="onClick">
        <div class="img-box">
            <img class="cover" :src="cover" mode="aspectFill" alt="">
        </div>
        <div class="info-box">
            <div class="name">
                <div class="text-normal font-bold">{{name}}</div>
                <div class="feature text-small" v-if="features">
                    {{features}}
                </div>
            </div>
            <div class="info text-small grey-color">
                <div class="">
                    <span>{{isPhotography && isPhotography === '1' ? '套系' : '商品'}} {{isPhotography ? pkg : good}}</span>
                    <span class="mr-left-20">访客  {{visitorNumber}}</span>
                </div>
            </div>

            <!-- <div class="label text-tiny orange-gold-color" v-if="tag">
                <img class="medal" src="https://static.playground.forzoom.tech/meta/zhuyintiancheng/shop/shop_medal.png" />
                <span class="tag">{{tag}}</span>
            </div> -->
            <div class="label text-tiny place_tag" v-if="tag">
                <img class="medal" src="https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/shop_medal_new.png" />
                <!-- <span class="tag">{{tag}}</span> -->
                <span class="tag place_tag">
                    <div>距离{{distance?distance:'-'}}km</div>
                    <div class="place">{{tag}}</div>
                </span>
            </div>

            <div class="tag-box white-color">
                <!-- <div class="tag yellow-bg">呵呵呵</div>
                <div class="tag blue-bg">做个人吧</div> -->
                <!-- <div class="tag yellow-bg" v-if="tag">
                    <span>{{tag}}</span>
                </div> -->
                <!-- <div class="tag primary-bg">
                    <span>品质认证</span>
                </div> -->
            </div>
            <div class="menu text-normal">
                <!-- <div class="">
                    <span>{{isPhotography && isPhotography === '1' ? '套系' : '商品'}} {{isPhotography ? pkg : good}}</span>
                    <span class="mr-left-20">访客  {{visitorNumber}}</span>
                </div> -->
                <div class="comment info_bg_gr" @click.stop="makecomment(shopId)">
                    <div class="comment_img info_bg_bl">
                        <img src="https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/2_2.png" class="comment_img_icon" alt="" />
                    </div>
                    <div class="comment_con padding_le_14">评论</div>
                </div>
                <div class="border_right_gray" style="height:34rpx;border-right:4rpx solid #e8e8e8;margin:26rpx 20rpx 0rpx 20rpx"></div>
                <div class="comment info_bg_bl mr-left-10" @click.stop="makeCall(phone)">
                    <div class="comment_img info_bg_gr">
                        <img src="https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/2_1.png" class="phone_img_icon" alt="" />
                    </div>
                    <div class="comment_con padding_le_10 phone_white">CALL</div>
                </div>
                <!-- <div class="color-red">
                    ¥{{startingPriceCurrency}}起
                </div> -->
            </div>
        </div>
    </div>
</template>

<script>
import {
    currency,
} from '@/lib/utils';
import { api } from '@/lib/api';
import { EMPTY_LIST, ROUTE_NAME } from '@/lib/constant';

export default {
    name: 'ShopListItem',
    props: {
        containerClass: {
            type: [ Object, Array ],
        },
        cover: {
            type: String,
        },
        isPhotography: {
            type: Number,
        },
        name: {
            type: String,
        },
        tag: {
            type: String,
        },
        good: {
            type: Number,
        },
        pkg: {
            type: Number,
        },
        visitorNumber: {
            type: String,
        },
        startingPrice: {
            type: Number,
        },
        features: {
            type: String,
        },
        shopId:{
            type: Number,
        },
        distance:{
            type: Number,
        },
        phone:{
            type: String,
        }
    },
    computed: {
        startingPriceCurrency() {
            return this.startingPrice ? currency(this.startingPrice) : 0;
        },
    },
    methods: {
        onClick() {
            this.$emit('click');
        },
        makecomment(_id){
            // this.$emit('makecomment');
            api.push({
                name: ROUTE_NAME.SHOP_COMMENT,
                params: {
                    shopId: _id + '',
                },
            });

            //  console.log(this.shopId)
        },
        makeCall(phone){
            if(phone){
                wx.makePhoneCall({
                    phoneNumber: phone,
                });
            }
            
        }
    },
    watch:{
        distance(old,now){
            console.log('监听：',old,now)
        },
        tag(old,now){
            console.log('tag:',old,now)
        },
        shopId(old,now){
            console.log('jianyinL:::',old,now)
        }
    }
    
};
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.border_right_gray{
    border-right: 2px solid #ffffff;
}
.menu{
    width: 100%;
    display: flex;
}
.info_bg_bl{
    background-color: #63b1fb;
}
.info_bg_gr{
    background-color: #e8e8e8;
}
.phone_white{
    color: #ffffff;
}
.padding_le_10{
    padding: 0px 10px;
}
.padding_le_14{
    padding: 0px 16px;
}
.comment{
    height: 22px;
    border-radius: 30rpx;
    
    display: flex;
    margin: 10px 0px;
}
.comment_img{
    width: 22px;
    height: 22px;
    border-radius: 50%;
}
.comment_img_icon{
    width: 12px;
    height: 12px;
    margin-left: 4px;
}
.phone_img_icon{
    width: 22px;
    height: 22px;
}
.comment_con{
    height: 22px;
    line-height: 22px;
    font-size: 20rpx;
    text-align: center;
}

// 位置
.place_tag{
    display: flex!important;
}
.place{
    margin-left: 25rpx;
}

.shop-list-item {
    position: relative;
    display: flex;
    // padding: 10px;
    margin-bottom: 18rpx;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 7px 14px 0px rgba(248, 234, 234, 0.5);
    .img-box {
        width: 100px;
        height: 100px;
        .cover {
            width: 100%;
            height: 100%;
            border-radius: 2px;
        }
    }
    .info-box {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;
        box-sizing: border-box;
        flex: 1;
        padding: 10px;
        // margin-left: 10px;
        .mr-left-20 {
            margin-left: 40rpx;
        }
        .feature {
            color: #F46D3E;
            background-color: #FDDBCF;
        }
        .label {
            display: inline-block;
            // backgrou nd-color: @color-gold;
            .medal {
                // width: 11px;
                // height: 11px;
                width: 13px;
                height: 13px;
            }
            .tag {
                padding: 0 4px;
            }
        }
        .name,
        .info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }
    }
    .tag-box {
        display: flex;
        flex-wrap: wrap;
        .tag {
            display: flex;
            align-items: center;
            padding: 2rpx 10rpx;
            margin-right: 22rpx;
            // line-height: 32rpx;
            font-size: 16rpx;
            border-radius: 14rpx;
        }
    }
}
</style>
